<template>
    <view>
        <!-- 根据单据筛选 -->
        <view class="change-bills-box">
            <view
                class="item"
                v-for="(item, index) in billsList"
                @click="changeBills(item)"
                :key="index"
                :class="billsIndex == item.id ? 'active' : ''"
                >{{ item.title }}
                <text
                    class="new-bills"
                    v-if="item.newBills && item.newBills > 0"
                    >{{ item.newBills < 10 ? item.newBills : "9+" }}</text
                >
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            billsIndex: 1,
            billsList: [
                {
                    title: "云店单",
                    id: 1,
                    // newBills : 199,
                },
                {
                    title: "已确认",
                    id: 2,
                    // newBills : 31,
                },
                {
                    title: "草稿单",
                    id: 21,
                },
                {
                    title: "已作废",
                    id: 22,
                    // newBills : 5,
                },
            ],
        };
    },
    methods: {
        pageDefaultTab(tab) {
            this.billsList.map((v) => {
                if (v.id == tab) {
                    this.changeBills(v);
                }
            });
        },
        /*** 根据单据类型筛选 ***/
        changeBills(item) {

            if (this.billsIndex == item.id) return;
            this.billsIndex = item.id;
            // console.log("根据单据类型筛选 ==>   选中了",item.title,item.id);
            // if(this.billsIndex == 1)
            // {
            // 	this.$emit("setFilters",true,item.id);
            // }else
            // {
            this.$emit("setFilters", item.id);
            // }
            this.$emit("setST", item.id);
        },
    },
};
</script>

<style lang="scss">
.change-bills-box {
    height: 40px;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    // border-bottom: 1px solid #ECECEC;
    .item {
        font-size: 12px;
        position: relative;
        cursor: pointer;
        .new-bills {
            position: absolute;
            top: 0px;
            right: -15px;
            display: block;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(253, 0, 23, 0.8);
            color: #fff;
            font-size: 3px !important;
        }
    }

    .item:hover {
        &.active {
            color: #157bfc;
            border-bottom: 2px #157bfc solid;
        }
        color: rgba(21, 123, 252, 0.6);
    }
    .active {
        color: #157bfc;
        border-bottom: 2px #157bfc solid;
    }
}
</style>
